<!-- 首页粘性导航栏 -->
<template>
<div class="app-header-sticky" :class="{show:y>=70}">
    <div class="container">
        <router-link to="/home" class="logo-header-sticky"></router-link>
        <ul class="app-header-nav">
            <li class="home">
                <router-link to="/home">首页</router-link>
            </li>
            <li v-for="(item,index) in categoryDataList" :key="item.id"
            @mouseenter="isShowNav(index,true)"
            @mouseleave="isShowNav(index,false)"
            >
            <router-link :to="`/category/${item.id}`">{{item.name}}</router-link>
            <AppHeaderNav :children="item.children" ref="open"/>
            </li>
        </ul>
        <div class="right"><a href="javascript:;">品牌</a><a href="javascript:;">专题</a></div>
    </div>
</div>
</template>

<script>
import throttle from 'lodash/throttle'//节流
import { mapState } from 'vuex'
import AppHeaderNav from './AppHeaderNav.vue';
export default{
    data: function () {
        return { y: 0 };
    },
    computed: {
        //引入分类列表
        ...mapState('category', ['categoryDataList'])
    },
    methods: {
        isShowNav(id,isShowNav){
            this.$refs.open[id].show = isShowNav
        },
        //使用节流
        isShowHeader: throttle(function () {
            this.y = window.pageYOffset;
        }, 50)
    },
    mounted() {
        //监听页面滚动
        window.addEventListener('scroll', this.isShowHeader);
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.isShowHeader);
    },
    components: { AppHeaderNav }
}
</script>

<style lang="less" scoped>
@import '@/assets/styles/variables.less';

/* 展示时，执行动效 */
.show{
    transition: all 0.3s linear;
    transform: none !important;
    opacity: 1 !important;
}

.app-header-sticky{
    opacity: 0;
    transform: translateY(-100%);
    z-index: 999;
    width: 100%;
    height: 80px;
    /* 固定在窗口某个位置，通过：top、left、right、bottom设定相对窗口的具体位置 */
    position: fixed;
    left: 0;
    /*我发现写0 时，在滚动过程中，会有缝隙*/
    top: -1px;
    background-color: #fff;

    .container{
        display: flex;
        align-items: center;
        /* logo样式 */
        .logo-header-sticky{
            width: 200px;
            height: 80px;
            background: url(../assets/images/logo.png) no-repeat right 2px;
            background-size: 160px auto;
        }

        .app-header-nav{
            width: 820px;
            display: flex;
            justify-content: space-around;
            padding-left: 40px;

            /* `>` 是子代 ，> li 的意思是：当前元素的儿子 且是li元素 */
            > li{
                width: 38px;
                text-align: center;
                margin-right: 40px;
                > a{
                    font-size: 16px;
                    line-height: 32px;
                    height: 32px;
                    display: inline-block;
                }

                &:hover,
                &.active{
                    > a{
                        color: @themeColor;
                        border-bottom: 1px solid @themeColor;
                    }
                }
            }
        }
        .right{
            width: 220px;
            display: flex;
            text-align: center;
            padding-left: 40px;
            border-left: 2px solid @themeColor;
            > a {
				width: 38px;
				margin-right: 40px;
				font-size: 16px;
				line-height: 1;
			}
        }
    }
}
</style>